<% if for_template || (key.present? && value.present?)  %>
  <div class="pointer-events-none w-full">
    <div data-controller="alert" data-alert-hide-class="translate-x-[500px] opacity-0" class="ease-in-out duration-500 w-full relative pointer-events-auto <%= tailwind_classes_for(key) %>">
      <div class="p-2">
        <p class="text-sm lg:text-base font-medium text-center uppercase text-text flash-message">
          <%= value %>
        </p>
        <button data-action="alert#close" class="absolute top-2 right-2 h-[22px] lg:h-6">
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
<% end %>
